<template>
  <div>
    <el-table :data="memberDataList" style="width: 100%" ref="tableRef" :height="tableHeight"
              v-loading="loading">
      <el-table-column type="index" label="序号" width="120" />
      <el-table-column prop="customerName" label="会员名称" />
      <el-table-column prop="memberName" label="会员等级" />
      <el-table-column prop="memberDiscount" label="折扣比例">
        <template #default="{row}">
          <span>{{ row.discountRate / 100 }} %</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="200px">
        <template #default="{row}">
          <Link label="修改会员等级" @click="onChangeLevelClick(row)" />
        </template>
      </el-table-column>
    </el-table>
  </div>

  <el-dialog :close-on-press-escape="false" width="452px" v-model="levelDialogVisible" :close-on-click-modal="false">
    <div class="detailDialog">修改会员等级</div>
    <el-form>
      <el-form-item label="会员名称" :label-width="formLabelWidth">
        <el-input v-model="member.showCustormerData.customerName" disabled autocomplete="off" />
      </el-form-item>

      <el-form-item label="会员等级" :label-width="formLabelWidth">
        <el-select @change="optionValueChange" v-model="member.optionValue" placeholder="请选择会员等级">
          <el-option
            v-for="item in member.memberOptions"
            :key="item.memberId"
            :label="item.memberName"
            :value="item.memberId" />
        </el-select>
      </el-form-item>

      <el-form-item label="会员折扣" :label-width="formLabelWidth">
        <el-input v-model="member.showCustormerData.discountRate" disabled autocomplete="off" />
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="levelDialogVisible = false">取消</el-button>
        <el-button type="primary"
                   @click="onSaveClick">保存</el-button>
      </span>
    </template>
  </el-dialog>

</template>
<script setup>
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { calcTableHeight } from '@/assets/js/utils.js'
import api from '@/api'
import Link from '@/components/button/link.vue'

/*********** 会员列表开始 ********************/
const { tableRef, tableHeight } = calcTableHeight(730)
const formLabelWidth = '100px'
const levelDialogVisible = ref(false)
const loading = ref(false)
defineProps(['memberDataList'])
const $emits = defineEmits(['setLoadData'])
const member = reactive({
  memberOptions: [],
  optionValue: '',
  showCustormerData: {}
})
const optionValueChange = (val) => {
  const optionValue = member.memberOptions.filter(item => item.memberId === val)[0]
  member.showCustormerData.discountRate = `${optionValue.discountRate / 100} %`
}
// 修改会员等级
const onChangeLevelClick = async (row) => {
  member.optionValue = row.memberName
  member.showCustormerData = JSON.parse(JSON.stringify(row))
  member.showCustormerData.discountRate = `${member.showCustormerData.discountRate / 100} %`
  let url = `/medinstrument/boss/member/getApplyMemberList?supplierId=${row.supplierId}`
  let { data, err } = await api.get(url)
  if (err) {
    ElMessage.error(err)
    return
  }
  member.memberOptions = data.memberList
  // if (member.memberOptions.length !== 5) {
  //   ElMessage.error('暂无可修改的会员等级')
  //   return
  // }
  levelDialogVisible.value = true
  loading.value = false
}

// 保存会员等级弹窗
const onSaveClick = async () => {
  let url = '/medinstrument/boss/member/updateCustomerMember'
  if (!Number(member.optionValue)) {
    ElMessage.error('请修改会员等级')
    return
  }
  const params = member.memberOptions.filter(item => item.id == member.optionValue)[0]
  let {
    data,
    err
  } = await api.post(`${url}?customerId=${member.showCustormerData.customerId}&memberId=${member.optionValue}&supplierId=${member.showCustormerData.supplierId}`)
  if (err) {
    ElMessage.error(err)
    levelDialogVisible.value = false
    return
  }
  $emits('setLoadData')
  levelDialogVisible.value = false
  ElMessage.success('修改会员等级成功')
}
</script>
<style scoped lang="scss">
.detailDialog {
  font-size: 18px;
  color: #303133;
  font-weight: 600;
  margin-bottom: 20px;
}
</style>
